<template>
  <tf-panel class="page-3 page-common" title="整体概况">
    <section class="descript">
      <h6>投诉情况</h6>
      <dl class="desc">
        <dt>（一）整体投诉指标</dt>
        <dd class="dd">红色指标：省公司暂未发布，有效申诉量190，同比上升8%</dd>
        <dd class="dd">投诉降压：投诉万笔88.52，全省排名第9，同类第2，受节假日影响本月达成110的目标，按正常月份折算万笔为124，超过目标值</dd>
        <dd class="dd">质量提升：投诉处理及时率97.32，排名全省第7，同类第2，未达98%的目标，<span class="red">较上周提升0.1pp</span>；投诉处理满意度90.79%，排名全省第8，同类第3，<span class="red">较上周提升0.61pp</span>；重复投诉率13.84%，排名全省第8，同类第3，未达10%的目标。</dd>
      </dl>
    </section>
    <table class="tab">
      <tr class="tr1">
        <td class="td1">分类</td>
        <td class="td2">投诉指标</td>
        <td>目标</td>
        <td>现状</td>
        <td>排名</td>
      </tr>
      <tr class="tr1">
        <td rowspan="5">红线管控</td>
        <td>百万客诉申诉率</td>
        <td>通管局未公布</td>
        <td>通管局未公布</td>
        <td>通管局未公布</td>
      </tr>
      <tr class="tr1">
        <td>有效申诉量</td>
        <td>下降10%</td>
        <td>190.8%</td>
        <td>暂无</td>
      </tr>
      <tr class="tr1">
        <td>其中：不明扣费申诉率</td>
        <td rowspan="3">省公司未公布</td>
        <td rowspan="3">省公司未公布</td>
        <td rowspan="3">省公司未公布</td>
      </tr>
      <tr class="tr1">
        <td>其中：新老不同权申诉率</td>
      </tr>
      <tr class="tr1">
        <td>其中：无法销户申诉率</td>
      </tr>
      <!-- 分类tr2 -->
      <tr class="tr2">
        <td rowspan="4">投诉降压</td>
        <td>投诉万比</td>
        <td>&lt;=110</td>
        <td>88.52</td>
        <td>(9.2)</td>
      </tr>
      <tr class="tr2">
        <td>投诉万比改善度</td>
        <td>比高法</td>
        <td>-14.58%</td>
        <td>(4,1)</td>
      </tr>
      <tr class="tr2">
        <td>不知情投诉改善度</td>
        <td>下降50%</td>
        <td>-21.41%</td>
        <td>(5,1)</td>
      </tr>
      <tr class="tr2">
        <td>外呼投诉改善度</td>
        <td>下降50%</td>
        <td>-41.56%</td>
        <td>8,2)</td>
      </tr>
      <!--tr3-->
      <tr class="tr1">
        <td rowspan="4">质量提升</td>
        <td>投诉处理及时率</td>
        <td>98%</td>
        <td>97.32%</td>
        <td>(7.2)</td>
      </tr>
      <tr class="tr1">
        <td>投诉处理满意率</td>
        <td>90%</td>
        <td>90.79%</td>
        <td>(8,2)</td>
      </tr>
      <tr class="tr1">
        <td>重复投诉率</td>
        <td>10.00%</td>
        <td>13.84</td>
        <td>(8,3)</td>
      </tr>
    </table>
    <section class="descript">
      <dl class="desc">
        <dt>（二）投诉量分类监控</dt>
        <div class="red-title">因受节假日影响，环比下降明显，整体投诉量同比下降明显</div>
        <dd class="dd">2月截止当前，投诉总量91773，环比下降9%，同比下降9%；</dd>
        <dd class="dd">家庭业务52431，环比下降19%，同比下降9%；</dd>
        <dd class="dd">基础业务13440，环比下降17%，同比上升0.4%；</dd>
        <dd class="dd">基础通信6816，环比下降5%，同比下降49；</dd>
      </dl>
    </section>
    <section class="zb-container">
      <div class="zb-item" v-for="item in zbList" :key="item.title">
        <div class="title">{{item.title}}</div>
        <div class="total">{{item.total}}</div>
        <div class="thb"><span class="left">环<i :class="getUpDownIconClass(item.huan)"></i></span><span class="right" :class="getColorClass(item.huan)" >{{item.huan}}</span></div>
        <div class="thb"><span class="left">同<i :class="getUpDownIconClass(item.tong)"></i></span><span class="right" :class="getColorClass(item.tong)" >{{item.tong}}</span></div>
      </div>
    </section>
    <section class="bottom">
      数据来源：投诉一体化平台
    </section>
  </tf-panel>
</template>
<script>
import TfPanel from '@/components/TfPanel/tf-panel.vue'

export default {
  name: 'tf-page-two',
  components: { TfPanel },
  data () {
    return {
      zbList: [
        {
          title: '投诉总量',
          total: 91773,
          huan: '-19%',
          tong: '-9%'
        },{
          title: '家庭业务',
          total: 52431,
          huan: '-19%',
          tong: '-9%'
        },{
          title: '基础业务',
          total: 13440,
          huan: '-17%',
          tong: '0%'
        },{
          title: '基础通信',
          total: 6816,
          huan: '-8',
          tong: '-49%'
        },{
          title: '移动转售业务',
          total: 6015,
          huan: '-20%',
          tong: '120200%'
        },{
          title: '服务质量',
          total: 4138,
          huan: '-36%',
          tong: '-8%'
        }
      ]
    }
  },
  methods: {
    getColorClass: function (value) {
      let val = parseFloat(value)
      if (val >=0) {
        return 'red'
      }
      else {
        return 'green'
      }
    },
    getUpDownIconClass(value) {
      let val = parseFloat(value)
      if (val >=0) {
        return 'fa fa-caret-up'
      }
      else {
        return 'fa fa-caret-down'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page-3 {
  padding: .8rem;
  color: #D2E3C7;
  > .title{
    font-size: 1rem;
  }
  .descript {
    margin-top: .5rem;
    h6{
      display: inline-block;
      margin-bottom: .1rem;
      font-size: .7rem;
      line-height: 1.5;
      padding: 0 .2rem;
      background: linear-gradient(to right, #23738B, transparent);
    }
    .desc{
      position: relative;
      padding: .3rem .2rem .3rem 1rem;
      font-size: .49rem;
      line-height: 1.3;
      background: #253C5B;
      box-shadow: .1rem .1rem .15rem #222;
      margin-bottom: .4rem;
      .red-title {
        font-size: .5rem;
        color:#D20000;
        white-space: nowrap;
        overflow: hidden;
        line-height: 1.4;
      }
      dt {
        position: relative;
        left: -.4rem;
        margin-bottom: .1rem;
        font-size: .6rem;
        line-height: 1.2;
        padding: 0 .2rem;
      }
      dd {
        position: relative;
        .red {
          color: #D20000;
        }
        &:after{
          content: ' ';
          position: absolute;
          left: -.5rem;
          top: .15rem;
          width: .3rem;
          height: .3rem;
          border-radius: 50%;
          background-color: #FFF;
        }
      }
    }
  }
  .tab{
    width: 100%;
    font-size: .4rem;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
    word-break: break-all;
    .tr1 {
      background: #697264;
    }
    .tr2 {
      background: #353932;
    }
    tr, td {
      padding: .1rem;
      border: 1px solid black;
      vertical-align: middle;
    }
    td.td1 {
      width: 10%;
    }
    td.td2 {
      width: 35%;
    }
    tr:first-child{
      background-color: #111;
    }
  }
  .bottom {
    position: relative;
    margin: 1rem 0 .3rem 0;
    font-size: .5rem;
    padding-left: 1rem;
    &:after {
      position: absolute;
      left: .2rem;
      top:0;
      content: ' ';
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      background: linear-gradient(#20D3A4, #3591BF);
    }
  }
  .zb-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .zb-item {
      font-size: .4rem;
      flex: 0 0 2.8rem;
      background:#484E45;
      margin-bottom: .2rem;
      .title {
        text-align: center;
        background: #222;
        line-height: 1.5;
      }
      .total {
        line-height: 1.5;
        text-align: center;
      }
      .thb {
        overflow: hidden;
        line-height: 1.3;
        padding: .1rem .15rem;
        .left {
          float: left;
          .fa {
            margin-left: .1rem;
          }
        }
        .right {
          float: right;
          &.red {
            color: red
          }
          &.green {
            color: green;
          }
        }
      }
    }
  }
}
</style>
